<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.web{
				width: 300px;
				height: 300px;
				border: 2px solid #000000;
				margin: 100px auto;
			}
			ul{
				overflow: hidden;
			}
			li{
				float: left;
				width: 100px;
				box-sizing: border-box;
				border: 1px solid #000;
				cursor: pointer;
				text-align: center;
			}
			li:active{
				background: gray;
			}
			.content{
				width: 100%;
				height: 100%;
				position: relative;
			}
			.content div{
				position: absolute;
				top: 0;
				left: 0;
				display: none;
			}
			.content div:nth-child(1){
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="web">
			<ul>
				<li>html</li>
				<li>css</li>
				<li>javascript</li>
			</ul>
			<div class="content">
				<div>html是超文本标记语言</div>
				<div>css是xxxxx</div>
				<div>JavaScript是xxxxxx</div>
			</div>
		</div>
		<script type="text/javascript">
			var aLi = document.querySelectorAll("li");
			var aCont = document.querySelectorAll(".content div");
			//方法一
//			aLi[0].addEventListener("click",function(){
//				aCont[0].style.display = "block";
//				aCont[1].style.display = "none";
//				aCont[2].style.display = "none";
//			})
//			aLi[1].addEventListener("click",function(){
//				aCont[1].style.display = "block";
//				aCont[0].style.display = "none";
//				aCont[2].style.display = "none";
//			})
//			aLi[2].addEventListener("click",function(){
//				aCont[2].style.display = "block";
//				aCont[1].style.display = "none";
//				aCont[0].style.display = "none";
//			})
			//方法二
			for(var i=0;i<aLi.length;i++){
				aLi[i].index = i;
				aLi[i].addEventListener("click",function(){
					//console.log(i);//3
					console.log(this.index);
					for(var j=0;j<aCont.length;j++){
						aCont[j].style.display = "none";
					}
					aCont[this.index].style.display = "block";
				})
			}
		</script>
	</body>
</html>
